import { Layout, Input, Popconfirm} from 'antd'
import { Link, useNavigate } from 'react-router-dom';
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux'
// import './index.scss'

const { Header } = Layout
const { Search } = Input;
const onSearch = (value, _e, info) => console.log(info?.source, value);
const MainHeader= () => {
    const navigate = useNavigate()
    const personalinfo = () => {
        // console.log('点击了个人信息')
        navigate('/person')
    }
    //退出登录确认回调
    const onConfirm = () => {
        // console.log('确认')

        navigate('/login')
    }
    const name = useSelector(state => state.user.userInfo.tokenName)
    return <div>
        <Layout>
            <Header className="header">
                <div className="logo" />
                <div className="user-info">
                    <Link to="/home" className='user-name'>主页</Link>
                    <Link to="/article" className='user-name'>刷八股</Link>
                    <Link to="/publish" className='user-name'>刷OJ</Link>
                    <Link to="/about" className='user-name'>关于我们</Link>


                    <Search
                        placeholder="输入搜索关键词"
                        allowClear
                        onSearch={onSearch}
                        style={{
                            marginTop: 18,
                            width: 200,
                            marginRight: 20
                        }}
                    />
                    <span className="user-name" onClick={personalinfo}><UserOutlined />{name}</span>
                    <span className="user-logout">
                        <Popconfirm title="是否确认退出?" okText="退出" cancelText="取消" onConfirm={onConfirm}>
                            <LogoutOutlined /> 退出
                        </Popconfirm>
                    </span>
                </div>
            </Header>
        </Layout>
    </div>


}
export default MainHeader
       